<template>
    <div class="containers container">
        <div class="container top-return">
            <div class="inline-block">
                <el-page-header @back="goBack" :content="currentItem.title"></el-page-header>
            </div>
        </div>
        <div class="container spc">
            <el-form ref="formRef" :model="currentItem.rowData" :rules="rules" label-width="150px" class="demo-ruleForm">
                <!-- 商品信息 -->
                <div class="title head-title bottom-border">
                    基础信息
                </div>

                <el-row class="el-rows">
                    <el-col :span="12">
                        <el-form-item label="供应商名称:" prop="supplierName" style="margin-bottom: 0;">
                            <el-input v-model="currentItem.rowData!.supplierName" placeholder="请输入供应商名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="主营品类:" prop="business" style="margin-bottom: 0;">
                            <el-input v-model="currentItem.rowData!.business" placeholder="请输入主营品类" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row class="el-rows">
                    <el-col :span="12">
                        <el-form-item label="联系人:" prop="contactor" style="margin-bottom: 0;">
                            <el-input v-model="currentItem.rowData!.contactor" placeholder="请输入联系人" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="电话:" prop="phone" style="margin-bottom: 0;">
                            <el-input v-model="currentItem.rowData!.phone" placeholder="请输入电话" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row class="el-rows">
                    <el-col :span="12">
                        <el-form-item label="供应商地址:" prop="supplierAddress" style="margin-bottom: 0;">
                            <el-input v-model="currentItem.rowData!.supplierAddress" placeholder="请输入供应商地址" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="邮箱地址:" prop="email" style="margin-bottom: 0;">
                            <el-input v-model="currentItem.rowData!.email" placeholder="请输入邮箱地址" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- <el-row class="el-rows">
                    <el-col :span="12">
                        <el-form-item label="供应商评级:" prop="supplierLevel" style="margin-bottom: 0;">
                            <el-select v-model="currentItem.rowData.supplierLevel" placeholder="请选择供应商评级"
                                style="width: 100%">
                                <el-option label="A级" value="A" />
                                <el-option label="B级" value="B" />
                                <el-option label="C级" value="C" />
                                <el-option label="D级" value="D" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row> -->

                <!-- 收款账户 -->
                <div class="title head-title bottom-border">
                    资质证件
                    <el-button type="primary" @click="openDiolg('新增',null,null)" class="standard-btn" :icon="CirclePlus" style="margin-left: 20px">
                        新增资质证件
                    </el-button>
                </div>
                <!-- <el-row class="el-rows">
                    <div v-for="item in 7" class="my-card">
                        <div class="left-img">
                            <img src="@/assets/images/pay.png" alt="" />
                        </div>
                        <div class="right-info">
                            <div class="right-info-title">
                                <div class="right-info-title-left">
                                    <span>营业执照</span>
                                    <span>2024-07-24 15:27</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-row> -->
                <el-row :gutter="20" class="el-rows">
                    <!-- 每行显示4个卡片 -->
                    <el-col v-for="(item, index) in currentItem.rowData.zcSupplierCertList" :key="index" :span="6" style="margin-top: 10px;">
                        <div class="my-card">
                            <div class="left-img">
                                <!-- <img :src="item.pic" alt="Card Image" /> -->
                                <el-image style="width: 60px; height: 60px" :src="item.pic" :zoom-rate="1.2" :max-scale="7"
                                    :min-scale="0.2" :preview-src-list="[item.pic]" show-progress :initial-index="4"
                                    fit="cover" preview-teleported/>
                            </div>
                            <div class="right-info">
                                <div class="right-info-title">
                                    <div class="right-info-title-left">
                                        <span>{{item.certName}}</span>
                                        <span>{{ item.expireDate }}</span>
                                    </div>
                                    <div class="card-actions">
                                        <el-button type="text" icon="el-icon-edit" @click="openDiolg('修改', item, index)">修改</el-button>
                                        <el-button type="text" icon="el-icon-delete" @click="currentItem.rowData.zcSupplierCertList.splice(index, 1)"
                                            style="color: #F56C6C">删除</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>

            </el-form>
        </div>
        <div class="bot-pos-submit">
            <el-button class="simple-btn" @click="goBack">关闭</el-button>
            <el-button class="standard-btn" v-if="currentType != '查看'" @click="submitForm">提交</el-button>
        </div>

        <MyDiolg ref="dialogRef" />
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, getCurrentInstance, toRefs, defineProps } from "vue";
import {
    CirclePlus,
    Delete,
    EditPen,
    Download,
    Upload,
    View,
    Refresh,
} from "@element-plus/icons-vue";
import MyDiolg from "./Form.vue";
import { ElMessage } from "element-plus";

const activeName = ref('first')
const dialogRef = ref(null);
const handleClick = (tab: any, event: Event) => {
    console.log(tab, event)
}
const formRef = ref();
const emit = defineEmits(["changeItem"]);
interface Props {
    currentItem: any;
    currentType: string;
}
const goBack = () => {
    emit("changeItem", "0");
};

// 接受父组件参数，配置默认值
const props = withDefaults(defineProps<Props>(), {
    currentItem: {
        rowData: {},
        api: null,
    },
    currentType: "",
});
//提交
const submitForm = async () => {
    formRef.value!.validate(async (valid) => {
        if (!valid) return;
        try {
            await props.currentItem.api({
                ...props.currentItem.rowData
            });
            ElMessage.success({ message: `${props.currentType}成功！` });
            goBack();
        } catch (error) {
            console.log(error);
        }
    });
};
const dialogCallBack = (data: any, index: number | null) => {
    console.log("回调", data);
    console.log("index", index);
    // 修改点：判断 index 是否为非 null（包括 0 等数字情况）
    if (index !== null) {
        props.currentItem.rowData.zcSupplierCertList[index] = data;
    } else {
        props.currentItem.rowData.zcSupplierCertList.push(data);
    }
};
const openDiolg = (title: string, row: any,index:number | null) => {
    const params = {
        title,
        isView: title === "查看",
        rowData: { ...row },
        api: title === "新增" ? dialogCallBack : title === "修改" ? dialogCallBack : undefined,
        index: index
        // getTableList: proTable.value?.getTableList,
    };
    dialogRef.value?.acceptParams(params);
};
//表单验证
const rules = reactive({
    supplierName: [
        { required: true, message: '请输入供应商名称', trigger: 'blur' },
        { min: 2, max: 50, message: '长度在2到50个字符', trigger: 'blur' }
    ],
    contactor: [
        { required: true, message: '请输入联系人', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在2到20个字符', trigger: 'blur' }
    ],
    phone: [
        { required: true, message: '请输入联系电话', trigger: 'blur' },
        {
            pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
        }
    ],
    supplierAddress: [
        { required: true, message: '请输入供应商地址', trigger: 'blur' },
        { min: 2, max: 100, message: '长度在2到100个字符', trigger: 'blur' }
    ],
    email: [
        {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']
        }
    ],
});
</script>
<style lang="scss" scoped>
.bot-pos-submit {
    position: fixed;
    height: 60px;
    background: white;
    width: calc(100vw - 252px);
    bottom: 0px;
    text-align: center;
    line-height: 60px;
    z-index: 999;
}

/* 卡片容器样式 */
// .el-rows {
//     display: flex;
//     flex-wrap: wrap;
//     margin: -10px;
// }

// .el-col {
//     padding: 10px;
// }

/* 卡片样式 */
.my-card {
    display: flex;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    height: 100%;
}

.my-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
   
}

.left-img {
    flex-shrink: 0;
    margin-right: 15px;
}

.left-img img {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    object-fit: cover;
}

.right-info {
    flex-grow: 1;
}

.right-info-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.right-info-title-left {
    display: flex;
    flex-direction: column;
}

.right-info-title-left span:first-child {
    font-weight: 600;
    font-size: 14px;
    color: #303133;
    margin-bottom: 4px;
}

.right-info-title-left span:last-child {
    font-size: 12px;
    color: #909399;
}

.card-actions {
    display: flex;
    align-items: center;
}

.card-actions .el-button {
    padding: 4px;
    margin-left: 5px;
    font-size: 16px;
}
</style>